<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div ref="mapContainer" class="map"></div>
    
    <!-- 加载状态提示 -->
    <div v-if="loading" class="loading">地图加载中...</div>
    <div v-if="error" class="error">地图加载失败: {{ error }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { loadBMap } from '@/utils/loadBMap';
import styleJson from  '@/components/baiduMap/custom_map_config.json';
// 定义点的类型
interface MapPoint {
  lng: number;
  lat: number;
  name?: string;
  icon?: string;
  expandStatus?: string;
  expandNo?: string;
  intervieweePhone?: string;
  expandTime?: string;

}

export default defineComponent({
  name: 'BaiduMap',
  props: {
    // 初始中心点
    center: {
      type: Object as () => MapPoint,
      default: () => ({ lng: 116.404, lat: 39.915 })
    },
    // 初始缩放级别
    zoom: {
      type: Number,
      default: 15
    },
    // 要标记的点
    points: {
      type: Array as () => MapPoint[],
      default: () => []
    },
    // 百度地图AK
    ak: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const mapContainer = ref<HTMLElement | null>(null);
    const loading = ref(true);
    const error = ref<string | null>(null);
    let map: any = null;
    let markers: any[] = [];

    // 初始化地图
    const initMap = () => {
      if (!mapContainer.value) return;
      
      // 创建地图实例
      map = new BMap.Map(mapContainer.value);

      // 设置地球模式
      // map.setMapType(BMap.BMAP_EARTH_MAP);

      // 设置中心点和缩放级别
      const point = new BMap.Point(props.center.lng, props.center.lat);

      map.centerAndZoom(point, props.zoom);

      // 启用控件
      map.enableScrollWheelZoom(); // 滚轮缩放
      map.enableDragging();        // 拖拽
      map.addControl(new BMap.NavigationControl()); // 缩放控件
      map.addControl(new BMap.ScaleControl());      // 比例尺

      // const styleJson = [
      //   {
      //     "featureType": "water",      // 水域
      //     "elementType": "all",
      //     "stylers": {
      //       "color": "#05181c"        // 浅蓝色水域
      //     }
      //   },
      //   {
      //     "featureType": "land",      // 陆地
      //     "elementType": "all",
      //     "stylers": {
      //       "color": "#963c3c"        // 浅灰色地面
      //     }
      //   },
      //   {
      //     "featureType": "building",  // 建筑物
      //     "elementType": "all",
      //     "stylers": {
      //       "color": "#e6e6e6"        // 浅灰色建筑
      //     }
      //   },
      //   {
      //     "featureType": "green",     // 绿地
      //     "elementType": "all",
      //     "stylers": {
      //       "color": "#d1e9b7"        // 浅绿色
      //     }
      //   },
      //   {
      //     "featureType": "arterial",  // 主干道
      //     "elementType": "all",
      //     "stylers": {
      //       "color": "#ffffff"        // 白色道路
      //     }
      //   }
      // ];
      map.setMapStyleV2(
        {
          styleJson
        }
        );

      // 3D效果配置
      // map.setDisplayOptions({
      //   building: true,      // 显示3D建筑
      //   indoor: false,       // 不显示室内地图
      //   overlay: true,      // 显示覆盖物
      //   skyColors: [        // 天空颜色渐变
      //     'rgba(135, 206, 250, 0)',     // 顶部颜色
      //     'rgba(135, 206, 250, 1)'      // 底部颜色
      //   ]
      // });

      // 添加标记点
      addMarkers();
      
      loading.value = false;
    };

    // 添加标记点
    const addMarkers = () => {
      if (!map) return;
      
      // 清除现有标记
      clearMarkers();
      
      props.points.forEach(point => {
        const markerPoint = new BMap.Point(point.lng, point.lat);
        let marker: any;
        
        // 使用自定义图标
        if (point.icon) {
          const icon = new BMap.Icon(
            point.icon,
            new BMap.Size(23, 25),
            {
              // 指定定位位置。
              // 当标注显示在地图上时，其所指向的地理位置距离图标左上
              // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
              // 图标中央下端的尖角位置。
              anchor: new BMap.Size(10, 25),
              // 设置图片偏移。
              // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
              // 需要指定大图的偏移位置，此做法与css sprites技术类似。
              // imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
            }
            // { anchor: new BMap.Size(16, 32) }
          );
          marker = new BMap.Marker(markerPoint, { icon });
        } else {
          marker = new BMap.Marker(markerPoint);
        }

        /**
         * 添加信息窗口
         *
         * : ${point.expandNo} 拓展次数
         *  ${point.addr}
          */

        if (point.name) {
          const infoWindow = new BMap.InfoWindow(`
            <div style="padding: 5px; min-width: 150px;font-size: 14px;">
            <p >
                <span style="background-color:#FF5722 !important; padding: 2px 8px;">
                ${point.expandStatus}
                </span>
                <span style="font-size: 16px;margin-left:10px">${point.name}</span>

            </p>
              <p style="margin: 0;">地址: </p>
              <p style="margin: 0;">联系人: ${point.intervieweePhone}</p>
              <p style="margin: 0;">拓展次数:1</p>
              <p style="margin: 0;"><span style="background-color:#FF5722 !important; padding: 2px 8px;">最后一次拓展时间:</span> ${point.expandTime}</p>
            </div>
          `);
          
          marker.addEventListener('click', () => {
            map.openInfoWindow(infoWindow, markerPoint);
          });
        }
        
        map.addOverlay(marker);
        markers.push(marker);
      });
    };

    // 清除所有标记
    const clearMarkers = () => {
      if (!map) return;
      
      markers.forEach(marker => {
        map.removeOverlay(marker);
      });
      markers = [];
    };

    // 加载地图API并初始化
    onMounted(async () => {
      try {
        await loadBMap(props.ak);
        initMap();
      } catch (err) {
        error.value = err instanceof Error ? err.message : String(err);
        loading.value = false;
      }
    });

    // 组件卸载时清理
    onUnmounted(() => {
      if (map) {
        map.clearOverlays();
        // map.destroy();
        map = null;
      }
    });

    return {
      mapContainer,
      loading,
      error
    };
  }
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.loading, .error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
}

.error {
  color: red;
}
</style>
